<template>
	<view class="my-content">
		<!-- 我的 -->
		<view class="myInfo-container">
			<image class="avatar" src="https://lsol-house-upload.oss-cn-hangzhou.aliyuncs.com/2020-09-29wxls/yuanApp/yuanLogo/256x256.png"></image>
			<view class="myInfo-text">{{ fullName }}</view>
		</view>
		<!-- 导航nav -->
		<view class="nav-container">
			<view class="item-nav" v-for="(item,index) in navList" :key="item.id" @click="navTo(item)">
				<view class="item-nav-left">
					<image class="item-nav-img" :src="item.icon" mode=""></image>
					<view class="item-nav-title">{{ item.title }}</view>
				</view>
				<view class="iconfont rightIcon">&#xe665;</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/server/getData.js'
	export default{
		computed:{
			fullName(){
				if(!this.userInfo) return
				return this.userInfo.fullName || this.userInfo.nickName || this.userInfo.account 
			}
		},
		data(){
			return {
				navList:[
					{
						id:1,
						icon:'/static/imgs/nav1.png',
						title:'常用联系人',
						url:'/pages/nav/audience'
					},
					{
						id:2,
						icon:'/static/imgs/nav2.png',
						title:'门票预约记录',
						url:'/pages/nav/myTicket'
					}
				],
				userInfo:null
			}
		},
		onLoad(){
			this.init_load()
		},
		methods:{
			init_load(){
				this.get_info()
			},
			async get_info(){
				try{
					const res = await api.yuser.info()
					this.userInfo = res
				}catch(e){
				}
			},
			navTo(item){
				if(!item.url) return
				uni.navigateTo({ url:item.url })
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
	}
	.my-content{
		height: 100%;
		background-color: #f5f6fa;
		.myInfo-container{
			display: flex;
			align-items: center;
			padding: 40rpx;
			.avatar{
				width: 140rpx;
				height: 140rpx;
				border-radius: 100%;
			}
			.myInfo-text{
				margin-left: 20rpx;
				font-size: 30rpx;
				color: #333;
			}
		}
		.nav-container{
			.item-nav{
				display: flex;
				padding: 20rpx 32rpx;
				background-color: #FFF;
				margin-bottom: 10rpx;
				justify-content: space-between;
				align-items: center;
			}
			.item-nav-left{
				display: flex;
				align-items: center;
				.item-nav-img{
					width: 32rpx;
					height: 32rpx;
				}
				.item-nav-title{
					margin-left: 8rpx;
					font-size: 28rpx;
					color: #333;
				}
			}
			.rightIcon{
				color: #969799;
			}
		}
	}
</style>